<script setup>
import {listAllQuestionnaire} from "@/api/keyan/questionnaire.js";

const {proxy} = getCurrentInstance();
const form = ref({});
const props = defineProps({
  isEdit: {
    type: Boolean,
    default: true,
  },
  data: {
    type: Object,
    default: () => {
      return {
        wj1Ids: '',
        wj2Ids: '',
        wj3Ids: '',
      }
    }
  }
});

const question1 = ref([]);
const question2 = ref([]);
const question3 = ref([]);

const wjResult = ref({
  wj1Fs: 0,
  wj1Jg: '低危',
  wj1Ids: '',
  wj1Dj: 'info',
  wj2Fs: 0,
  wj2Jg: '低危',
  wj2Ids: '',
  wj2Dj: 'info',
  wj3Fs: 0,
  wj3Jg: '低危',
  wj3Ids: '',
  wj3Dj: 'info',
});

watch(props.data, async (newData) => {
  await nextTick();
  setTableData(newData);
});

watch(question3, async (newQues) => {
  await nextTick()
  setTableData(props.data);
});

function selectable(row, idx) {
  return props.isEdit;
}

function handleWj1RowClick(row) {
  // row.isSelected = !row.isSelected;
  proxy.$refs.wj1Table.toggleRowSelection(row, undefined, false);
}

function handleWj2RowClick(row) {
  // row.isSelected = !row.isSelected;
  proxy.$refs.wj2Table.toggleRowSelection(row, undefined, false);
}

function handleWj3RowClick(row) {
  // row.isSelected = !row.isSelected;
  proxy.$refs.wj3Table.toggleRowSelection(row, undefined, false);
}


function handSelectionChangeWj1(rows) {
  wjResult.value.wj1Fs = 0;
  wjResult.value.wj1Ids = '';
  if (rows.length > 0) {
    rows.forEach((row) => {
      wjResult.value.wj1Fs += row.score;
      wjResult.value.wj1Ids += row.id + ',';
    });
  }
  if (wjResult.value.wj1Fs < 1) {
    wjResult.value.wj1Jg = '低危';
    wjResult.value.wj1Dj = 'info';
  } else {
    wjResult.value.wj1Jg = '高危';
    wjResult.value.wj1Dj = 'danger';
  }
}

function handSelectionChangeWj2(rows) {
  wjResult.value.wj2Fs = 0;
  wjResult.value.wj2Ids = '';
  if (rows.length > 0) {
    rows.forEach((row) => {
      wjResult.value.wj2Fs += row.score;
      wjResult.value.wj2Ids += row.id + ',';
    });
  }
  if (wjResult.value.wj2Fs < 1) {
    wjResult.value.wj2Jg = '低危';
    wjResult.value.wj2Dj = 'info';
  } else {
    wjResult.value.wj2Jg = '高危';
    wjResult.value.wj2Dj = 'danger';
  }
}

function handSelectionChangeWj3(rows) {
  wjResult.value.wj3Fs = 0;
  wjResult.value.wj3Ids = '';
  if (rows.length > 0) {
    rows.forEach((row) => {
      wjResult.value.wj3Fs += row.score;
      wjResult.value.wj3Ids += row.id + ',';
    });
  }
  if (wjResult.value.wj3Fs < 2) {
    wjResult.value.wj3Jg = '低危';
    wjResult.value.wj3Dj = 'info';
  } else if (wjResult.value.wj3Fs < 4) {
    wjResult.value.wj3Jg = '中危';
    wjResult.value.wj3Dj = 'warning';
  } else {
    wjResult.value.wj3Jg = '高危';
    wjResult.value.wj3Dj = 'danger';
  }
}

function setTableData(data) {
  // 如果当前不是编辑，做展示回显，则展示选择结果
  // console.log('参数：', data.wj1Ids,'列表：',question1.value);
  if (!props.isEdit) {
    if (data.wj1Ids && data.wj1Ids.length > 0 && question1.value && question1.value.length > 0) {
      for (const ques of question1.value) {
        if (data.wj1Ids.indexOf(ques.id) > -1) {
          setWj1Current(ques);
        }
      }
    }
    if (data.wj2Ids && data.wj2Ids.length > 0 && question2.value && question2.value.length > 0) {
      for (const ques of question2.value) {
        if (data.wj2Ids.indexOf(ques.id) > -1) {
          setWj2Current(ques);
        }
      }
    }
    if (data.wj3Ids && data.wj3Ids.length > 0 && question3.value && question3.value.length > 0) {
      for (const ques of question3.value) {
        if (data.wj3Ids.indexOf(ques.id) > -1) {
          setWj3Current(ques);
        }
      }
    }
  }
}

function setWj1Current(row) {
  // console.log('选择的行1：',row);
  proxy.$refs.wj1Table.toggleRowSelection(row, true, true);
}

function setWj2Current(row) {
  // console.log('选择的行2：',row);
  proxy.$refs.wj2Table.toggleRowSelection(row, true, true);
}

function setWj3Current(row) {
  // console.log('选择的行3：',row);
  proxy.$refs.wj3Table.toggleRowSelection(row, true, true);
}

function getQuestion() {
  listAllQuestionnaire().then((res) => {
    question1.value = res.data.wj1;
    question2.value = res.data.wj2;
    question3.value = res.data.wj3;
  });
}

onMounted(async () => {
  getQuestion();
  // await nextTick();
  setTableData(props.data);
});


//暴露state和play方法
defineExpose({
  wjResult,
});
</script>
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :lg="8" :md="12" :sm="24">
        <el-card style="max-width: 880px; cursor: pointer;" body-class="card-body">
          <template #header>
            <div class="card-header">
              <span>问卷1.中国结直肠癌高危因素量化问卷</span>
            </div>
          </template>

          <el-table
              ref="wj1Table"
              :data="question1"
              row-key="id"
              border
              @row-click="handleWj1RowClick"
              size="small"
              class="table-stl"
              @selectionChange="handSelectionChangeWj1"

          >
            <el-table-column prop="question" label="问题"/>
            <el-table-column prop="score" label="分数" width="60" align="center"/>
            <el-table-column type="selection" :selectable="selectable" label="得分" width="60" align="center"/>
          </el-table>

          <template #footer>

            <el-row>
              <el-col :span="14" style="font-size: xx-small;">
                说明：得分≥1分为结直肠癌高危人群
              </el-col>
              <el-col :span="10" style="font-size: xx-small;text-align: right">
                总分：
                <el-tag :type="wjResult.wj1Dj" effect="plain">{{ wjResult.wj1Fs }}</el-tag>
                <el-tag :type="wjResult.wj1Dj" round>{{ wjResult.wj1Jg }}</el-tag>
              </el-col>
            </el-row>
          </template>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="12" :xl="8" :sm="24">
        <el-card style="max-width: 880px; cursor: pointer;" body-class="card-body">
          <template #header>
            <div class="card-header">
              <span>问卷2.机会性筛查风险问卷</span>
            </div>
          </template>

          <el-table
              ref="wj2Table"
              :data="question2"
              border
              @row-click="handleWj2RowClick"
              size="small"
              class="table-stl"
              @selectionChange="handSelectionChangeWj2"
          >
            <el-table-column prop="question" label="问题"/>
            <el-table-column prop="score" label="分数" width="60" align="center"/>
            <el-table-column type="selection" :selectable="selectable" label="得分" width="60" align="center"/>
          </el-table>

          <template #footer>

            <el-row>
              <el-col :span="14" style="font-size: xx-small;">
                说明：得分≥1分为高危个体
              </el-col>
              <el-col :span="10" style="font-size: xx-small;text-align: right;">
                总分：
                <el-tag :type="wjResult.wj2Dj" effect="plain">{{ wjResult.wj2Fs }}</el-tag>
                <el-tag :type="wjResult.wj2Dj" round>{{ wjResult.wj3Jg }}</el-tag>
              </el-col>
            </el-row>
          </template>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="12" :xl="8" :sm="24">
        <el-card style="max-width: 880px; cursor: pointer;">
          <template #header>
            <div class="card-header">
              <span>问卷3.亚太结直肠癌筛查评分 （APCS）</span>
            </div>
          </template>
          <el-table
              ref="wj3Table"
              :data="question3"
              border
              @row-click="handleWj3RowClick"
              @selectionChange="handSelectionChangeWj3"
              :span-method="data => {
                if (data.columnIndex === 0) {
                    if (data.row.num !== 0) {
                      return { rowspan: data.row.num, colspan: 1 };
                    }else {
                      return { rowspan: 0, colspan: 0 };
                    }
                  }
              }"
              size="small"
              class="table-stl"
          >
            <el-table-column prop="classify" label="问题"/>
            <el-table-column prop="question" label="" width="80" align="center"/>
            <el-table-column prop="score" label="分数" width="60" align="center"/>
            <el-table-column type="selection" :selectable="selectable" label="得分" width="60" align="center"/>
          </el-table>

          <template #footer>
            <el-row>
              <el-col :span="14" style="font-size: xx-small;">
                说明：低危(0~1)，中危(2~3)，高危(4~7)
              </el-col>
              <el-col :span="10" style="font-size: xx-small;text-align: right;">
                总分：
                <el-tag :type="wjResult.wj3Dj" effect="plain">{{ wjResult.wj3Fs }}</el-tag>
                <el-tag :type="wjResult.wj3Dj" round>{{ wjResult.wj3Jg }}</el-tag>
              </el-col>
            </el-row>
          </template>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.app-container {
  color: #999;
}

.redClass {
  color: #f56c6c;
  background: #fef1f1;
}

.middleClass {
  color: #f8aeae;
  background: #ffebeb;
}

.normalClass {
  color: #409eff;
  background: #f5f5f5;
}

.card-header {
  text-align: center;
}

.table-stl {
  width: 100%;
  border-radius: 5px;
}


</style>
